<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加地址</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
        <style>
            .bgcolor-white {
                background-color: #fff;
            }

            .addbox {
                font-size: 0.6rem;
                color: #151516;
                padding: 0.3rem;
            }

            .address-row {
                line-height: 2rem;
                /*border-bottom: 1px solid #d9d9d9;*/

            }

            .address-row .lab-title {
                display: inline-block;
                width: 4rem;
            }

            .address-row .inputbox {
                border: 1px solid #d9d9d9;
                height: 1rem;
                display: inline-block;
                width: 10rem;
            }

            .addbtn {

                text-align: center;
                background-color: #e02e24;
                width: 60%;
                margin: 0.5rem auto;
                border-radius: 0.2rem;
                line-height: 1.5rem;
                color: #fff;
            }



            .province-content {
                position: absolute;
                bottom: 0px;
                width: 100%;
                z-index: 2001;
            }

            .province-content .item-list {
                line-height: 1.5rem;
                width: 100%;

                clear: both;
            }
            .item-list ul{
                overflow: scroll;
                height: 10rem;
            }


            .sku-selector-bg {
                position: fixed;
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                background: rgba(0, 0, 0, .7);
                z-index: 2000;
            }
            .navbox{

            }
            .navbox .nav-ads{
                display: inline-block;
                float: left;
            }
            .nav-ads span{
                display: inline-block;
                font-size: 0.6rem;
                padding: 0.1rem;
                line-height: 1.5rem;
            }
            .nav-select{
                color: #e02e24;
                border-bottom: 2px solid #e02e24;
            }
            .close{
                display: inline-block;
                float: right;
                line-height: 1.5rem;
                padding-right: 0.2rem;
                color: #d9d9d9;
                font-weight: 600;
            }
        </style>
    </head>
<body>
  <header class="aui-bar aui-bar-nav" id="header">
      <a class="aui-pull-left aui-btn" onclick="goback();">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">添加/修改地址</div>
  </header>
<div class="aui-content addbox bgcolor-white" id="addbox">
    <div class="address-row">
        <span class="lab-title">姓名</span> <input type="text" v-model="cnname" class="inputbox">
    </div>
    <div class="address-row">
        <span class="lab-title">手机号</span> <input type="text" v-model="mobile" class="inputbox">
    </div>
    <div class="address-row" @click="openbox"><span class="lab-title">省市</span><span>{{regiontxt}}</span>
        <span class="aui-iconfont aui-icon-right aui-pull-right"></span></div>
    <div class="address-row"><span class="lab-title">详细地址</span> <input type="text" style="width:15rem" v-model="address" class="inputbox"></div>
    <div class="addbtn" @click="saveaddress">保 存</div>

    <div class="provincebox" style="display: none"  v-show="showaddresslayer">
        <section class="sku-selector-bg"  @click="closebox"   >
            <div class="province-content bgcolor-white"  @click.stop>
                 <div class="navbox">
                    <div class="nav-ads">
                        <span  @click="prv_swt()"  :class="{'nav-select':prv_sel}">{{prv_title}}</span>
                        <span  @click="city_swt()" :class="{'nav-select':city_sel}" v-show="nav_city_display">{{city_title}}</span>
                        <span  @click="district_swt()" :class="{'nav-select':district_sel}" v-show="nav_district_display">{{district_title}}</span>
                    </div>
                    <div class="close"  @click="closebox" >取消</div>
                 </div>

                <div class="item-list">
                    <ul>
                        <li style="padding-left: 1rem"  v-for="item in prvlist" @click="opencity(item)" v-show="show_prvdata">{{item.title}}<i class="aui-iconfont aui-icon-right aui-pull-right"></i> </li>

                        <li style="padding-left: 1rem" v-for="item in citylist" @click="opendistrict(item)" v-show="show_citydata">{{item.title}}<i class="aui-iconfont aui-icon-right aui-pull-right"></i> </li>

                        <li style="padding-left: 1rem" v-for="item in districtlist" @click="setaddress(item)" v-show="show_districtdata">{{item.title}}</li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
function goback()
{
  if(vm.postparam.product_id>0){
    $page.openwin('product_checkorder','../product/checkorder.html',vm.postparam);
  }else{
    closewin();
  }


}
    var vm = new Vue({
        el: '#addbox',
        data:{
          postparam: {
              product_id: 0,
              sku_id: 0,
              buymod: '',
              orderno: '',
              buynum: 0,
              addressid: 0
          },
            id:0,
            cnname:'',
            mobile:'',
            address:'',
            prv_id:0,
            city_id:0,
            district_id:0,
            regiontxt:'请选择',
            showaddresslayer:false,

            //选中状态
            prv_sel:true,
            city_sel:false,
            district_sel:false,
            nav_city_display:false,
            nav_district_display:false,
            prv_title:'请选择',
            city_title:'请选择',

            district_title:'请选择',
            district_tab_show:false,

             prvlist:[],
            citylist:[],
            districtlist:[],
            show_prvdata:true,
            show_citydata:false,
            show_districtdata:false,
            token:'',

        },
        methods:{
             prv_swt:function () {
                this.prv_sel = true;
                this.city_sel=false;
                this.district_sel = false;

                this.show_prvdata = true;
                this.show_citydata =false;
                this.show_districtdata=false;
            },
            city_swt:function () {
                this.prv_sel = false;
                this.city_sel=true;
                this.district_sel = false;
                this.show_prvdata = false;
                this.show_citydata =true;
                this.show_districtdata=false;
            },
            district_swt:function () {
                this.prv_sel = false;
                this.city_sel=false;
                this.district_sel = true;
                this.show_prvdata = false;
                this.show_citydata =false;
                this.show_districtdata=true;
            },
            opencity:function (item) {
                //标题
                this.prv_id = item.id;
                this.prv_title = item.title;
                //状态条选中状态
                this.prv_sel = false;
                this.city_sel=true;
                this.district_sel = false;
                //状态条显示
                this.nav_city_display = true;
                this.nav_district_display = false;
                //数据
                this.citylist = item.city;
                this.show_prvdata = false;
                this.show_citydata = true;
                this.show_districtdata = false;



            },
            opendistrict:function (item) {
                //标题
                this.city_title = item.title;
                this.city_id = item.id;

                //状态条
                this.city_sel = false;
                this.prv_sel = false;
                this.district_sel = true;
                //状态条显示
                this.nav_city_display = true;
                this.nav_district_display = true;
                //数据
                this.districtlist = item.district;
                this.show_prvdata = false;
                this.show_citydata =false;
                this.show_districtdata = true;
            },
            setaddress:function (item) {
                this.district_id = item.id;
                this.district_title = item.title;
                this.showaddresslayer = false;
                this.regiontxt = this.prv_title+","+this.city_title+","+this.district_title;
                console.log(this.prv_title+","+this.city_title+","+this.district_title);
                console.log(this.prv_id+","+this.city_id+","+this.district_id);
            },
            openbox:function(){

                this.showaddresslayer = true;

            },
            closebox:function(){
                this.showaddresslayer = false;
            },
            saveaddress:function(){
                var pdata = {
                    cnname:this.cnname,
                    mobile:this.mobile,
                    provinceid:this.prv_id,
                    city_level1:this.city_id,
                    city_level2:this.district_id,
                    address:this.address,
                    id:this.id,
                    token:this.token
                 };
                 var url='/api/address/add';
               if(this.id>0){
                   url='/api/address/edit';
               }

                $page.get_data(url,'post',pdata,function (ret) {

                    if(ret.errno!=1000){

                      api.toast({
                          msg: ret.errmsg,
                          duration: 2000,
                          location: 'bottom'
                      });

                    }else{

                        if(vm.postparam.product_id>0){
                          vm.postparam.addressid = ret.data.id;
                          console.log('go checkorder page');
                          console.log(JSON.stringify(vm.postparam));
                          $page.openwin('product_checkorder','../product/checkorder.html', vm.postparam);
                         }else{
                           $page.openwin('home_address','./address.html');
                         }
                      }
                });
            },
            load_init:function () {
                if(this.id){
                    $page.get_data('/api/address/get','post',{id:this.id,token:this.token},function (ret) {
                        var adsinfo = ret.data;
                        if(ret.data){
                            vm.cnname=adsinfo.cnname;
                            vm.mobile = adsinfo.mobile;
                            vm.address = adsinfo.address;
                            vm.prv_id = adsinfo.provinceid;
                            vm.city_id = adsinfo.city_level1;
                            vm.district_id = adsinfo.city_level2;
                            vm.regiontxt = adsinfo.regiontxt;
                        }
                    });
                }
                 var citystr =api.readFile({
                    path: 'widget://res/citys.json',
                    sync: true,
                });
                vm.prvlist =JSON.parse(citystr);


             }


        }

    });

    apiready=function(){

      var pageParam = api.pageParam;
      vm.postparam.product_id = pageParam.product_id;
      vm.postparam.sku_id = pageParam.sku_id;
      vm.postparam.buymod = pageParam.buymod;
      vm.postparam.orderno = pageParam.orderno;
      vm.postparam.buynum = pageParam.buynum;
      vm.postparam.addressid = pageParam.addressid;
      if(pageParam.id){
      vm.id = pageParam.id;
      }
      console.log(JSON.stringify(pageParam));

      vm.token = $api.getStorage('token');
      $page.init();
       vm.load_init();
    }


</script>
</body>
</html>
